<template>
<div>
    <div style="padding-bottom:20px;">
        <el-input v-model="productname" placeholder="请输入仪器名称搜索" style="width:50%;padding-right:10px"></el-input>
        <el-button @click="searchProductName" style="display:inline-block;">搜索</el-button>
    </div>
    <el-table
    ref="multipleTable" v-loading="loading" 
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    class="no-multiple"
    @selection-change="handleSelectionChange"
    @select="selectTable">
    <el-table-column
      type="selection"
      min-width="180" align="left">
    </el-table-column>
    <el-table-column
      prop="productName"
      label="仪器名称"
      min-width="180" align="left">
    </el-table-column>
    <el-table-column
      prop="productId"
      label="仪器编号"
      min-width="180" align="left">
    </el-table-column>
    <el-table-column
      prop="modelType"
      label="产品编号"
      min-width="180" align="left"
      >
    </el-table-column>
  </el-table>
  <Pagination :total="total" :page="searchObj.page" :limit="searchObj.limit" :pageSizes="pageSizes"
              @pagination="paginations" />
   <div style="margin-top: 20px">
    <el-button @click="comfirmProduct()">确定</el-button>
  </div>
</div>
</template>
<script>
import api from "@/api/index";
import Pagination from "@/components/Pagination/index.vue";
  export default {
    components: {
    Pagination,
  },
  name: "AddProductList",
  props:['isOpened'],
    data() {
      return {
        productname:'',
        tableData: [],
        searchObj:{
            productName:'',
            page:1,
            limit:5,
        },
        videoid:this.$route.query.id,
        total:0,
        loading:false,
        pageSizes: [5, 10, 20, 30],
        isMultiple:false,
        multipleSelection:[]
      }
    },
    watch:{
        isOpened(val){
            if (!val) {
             this.productname=''   
            }
            this.getAllProduct();
        }
    },
    created() {
        this.getAllProduct();
    },
    methods: {
      getAllProduct() {
        this.searchObj.productName = this.productname
        this.searchObj.imlistid = this.$store.getters.imListId
        api.common.getProductListByImlistid(this.searchObj).then((res) => {
        this.tableData = res.data;
        this.total = res.total;
        this.loading = false;
      });
      },
       searchProductName() {
        this.loading = true;
        this.getAllProduct()
    },comfirmProduct(){
        if(this.multipleSelection && this.multipleSelection.length==0){
            this.$message({type:'error',message:'请选择仪器关联'})
            return false;
        }
        console.log("selectone",this.multipleSelection[0]);
        const oneProduct =  this.multipleSelection[0]
        var form={
            type:1,
            videoid:this.videoid,
            videoImlistid:this.$store.getters.imListId,
            videoImshowid:this.$store.getters.imShowId,
            productId:oneProduct.productId,
            productImlistid:oneProduct.imListId,
            productImshowid:oneProduct.imShowId,
            productName:oneProduct.productName,
            modelType:oneProduct.modelType,
            picName:oneProduct.picName,
            comName:oneProduct.comName,
            comLogo:oneProduct.comLogo,
            username:this.$store.getters.username
        }
        console.log('from',form)
        this.$emit("confirmProductsList", form);
       

    },handleSelectionChange(val) {
      // 通过配置判断是否可多选
      if (this.isMultiple) {
        this.multipleSelection = val
      } else {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val.pop())
        }
      }
    },
    selectTable(selection, row) {
      // 单选时
      if (!this.isMultiple) {
        this.multipleSelection = [row]
      }
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.getAllProduct();
    },
    }
  }
</script>
<style  lang="scss"  scoped>
.no-multiple{
    ::v-deep .el-table__header-wrapper .el-checkbox{
        display: none;
    }
}
</style>